<!DOCTYPE html>
<html>
<head>
    <title>黑马顺风车</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="../js/qrcode.min.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script>


        

        $(function(){
            //本行程详情
            $.ajax({
                type : "POST",
                url  : "/stroke/api/detail/"+getParam('tripId'),
                cache : false,
                async:false,
                data : null,
                success : function(data){
                    var d = data.data[0];
                    d.time = transDate(d.departureTime);
                    d.statusName = tripStatus[d.status];
                    $('#cost').text(getParam('c'));
                    renderByTemplate('#tripDetail','#template',d); 
                },
                error : function(){
                    
                }
            });
            //生成支付二维码（微信预支付）
            $.post('/payment/api/payment',JSON.stringify({orderId:getParam('id')}),function(d){
                console.log(d);
                if(d.code != 200){
                    showMsg(d.message);
                    if(d.code = -5005){
                        //已支付
                        toUrl('order.html',1000);
                    }
                }else{
                    var wx = d.data[0].codeUrl;
                    $('#qrcode').attr('src',wx);
                }
            });

        })
        //查询订单状态，未支付则去远程查询一下，同时同步本地order表
        //manual : 是否手动点击按钮
        function queryOrder(manual){
            $.post('/payment/api/query',JSON.stringify({orderId:getParam('id')}),function(d){
                console.log(d);
                if(d.code == 200 && d.data[0].status == 2){
                    showMsg('司机已确认到款');
                    toUrl('order.html',1000);
                }else if(manual){
                    showMsg('司机确认中···');
                }
            });
        }
        //每3s自动触发一次查询
        setInterval(queryOrder,3000);
    </script>
</head>
<body>
    <div id="template" style="display: none;">
        <input id="tripId" type="hidden" value="{id}"/>
        
        <p id="from">从：{startAddr}</p>
        <p id="to">到：{endAddr}</p>
        <p>出行时间：{time}</p>
        
    </div>

<div data-role="page" id="pageone">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#" data-rel="back" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-notext ui-corner-all">使用圆圈（默认）</a>
        <h1>乘客端 - 支付</h1>
    </div>
    <div style="margin-top:10px;"></div>

    <div id="content" class="ui-content2" style="padding:20px;line-height: 30px;">
        <br>
        <div>
            <img id="qrcode" src="/web/img/default-paycode.jpg" style="width: 100%;height: 100%">
        </div>
        <h3 id="time" style="color: brown; text-align: center;">支付金额：￥<span id="cost"></span></h3>
        <br>
        <button onclick="queryOrder(true)">我已支付</button>
        
    </div>
    <div id="tripDetail" class="ui-content2"></div>

    <div style="margin-bottom:20px;"></div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <div data-role="navbar" style="margin: 0;">
            <ul>
                <li><a href="javascript:location.href='user.html'" data-icon="home">首页</a></li>
                <li><a href="javascript:location.href='trip.html'" data-icon="grid">我的行程</a></li>
                <li><a href="javascript:location.href='order.html'" data-icon="bullets" class="ui-btn-active">我的订单</a></li>
                <li><a href="javascript:location.href='../common/userCenter.html'" data-icon="user">个人中心</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>